<template>
	<view class="content">
		<view class="box">
			<view class="icon" type="default" @tap="showme">
				<img src="/static/icon/dingwei.png" alt="" style="width: 30px;height: 30px;" />
			</view>
			<view class="search">
			<uni-search-bar @confirm="searchCityBus" v-model="searchKey"  /></view>
			</view>
			</view>
<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
  <swiper-item v-for="(item,index) in rotateList">
    <view class="swiper-item">
      <image :src="item.url" mode="" style="width: 100%;"></image>
    </view>
  </swiper-item>
</swiper>
<view   class="weather" style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;
			">
			<view class="icon" style="width: 100rpx;height: 100rpx; ">
				<image style="width: 100%;height: 100%;" :src="'/static/icons/'+ weatherNow.icon +'.svg'"
					mode=""></image>
			</view>
			<view class="text" style="font-size: 50rpx;margin-left: 10px;">
				{{weatherNow.temp}}°C
			</view>
			<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
				{{weatherNow.text}}
			</view>
			<view class="text" style=" margin-left: 10rpx;">
				{{weatherNow.windDir}} {{weatherNow.windScale}}级
			</view>
			<view>
				<view class="text" style="margin-left: 10rpx;">
					体感温度： {{weatherNow.feelsLike }}°C
				</view>
				<view class="text" style="margin-left: 10rpx;">
					湿度： {{weatherNow.humidity }}%
				</view>
			</view>
		</view>
		<uni-grid    class="grid":show-border="false" :column="6" @change="changeGrid">
		  <uni-grid-item v-for="(item,index) in gridData" :index="index">
		    <view class="grid-item-box" style="background-color: #fff;" >
		      <img :src="item.icon" style="30px"/>
		        <text class="text" >{{item.title}}</text>
		     </view>
		  </uni-grid-item>
		</uni-grid> 
		 <uni-dropdown v-model="isDropdownVisible" :options="scenicOptions" @change="handleScenicChange">
		    <view class="dropdown-trigger" :class="{ 'active': isDropdownVisible }">
		      <text class="dropdown-title">西安美景</text>
		      <uni-icons type="arrow-down" size="18"></uni-icons>
		    </view>
		    <view class="dropdown-content">
		      <view
		        v-for="(scenic, index) in scenicOptions"
		        :key="index"
		        class="dropdown-item"
		        @click="showScenicDetail(scenic)">
		        <image :src="scenic.image" mode="aspectFit" style="width: 80px; height: 80px; border-radius: 8px; margin-right: 10px;">
		        </image>
		        <view class="dropdown-item-text">
		          <text class="dropdown-item-title">{{scenic.name}}</text>
		          <text class="dropdown-item-desc">{{scenic.desc}}</text>
		        
		        <!-- 新增：点击放大美景图片的预览层 -->
		        <view class="scenic-preview" v-if="scenicPreview === scenic.name">
		          <image :src="scenic.image" mode="aspectFit" @click="closePreview">
		          </image>
		        </view>
		      </view>
		    </view>
			</view>
			
			
		  </uni-dropdown>
		
		  <!-- 美食展示区域 -->
		  <view class="food-section">
		    <view class="food-title">西安美食推荐</view>
		    <view class="food-item" v-for="(food, index) in foodData" :key="index">
		      <image :src="food.image" mode="aspectFit" style="width: 100px; height: 100px; border-radius: 8px; margin-right: 15px;">
		      </image>
		      <view class="food-item-info">
		        <text class="food-item-name">{{food.name}}</text>
		        <text class="food-item-description">{{food.description}}</text>
		      </view>
		      <!-- 新增：点击放大美食图片的预览层 -->
		      <view class="food-preview" v-if="foodPreview === food.name">
		        <image :src="food.image" mode="aspectFit" @click="closePreview">
		        </image>
		      </view>
		    </view>

		<!-- <button type="default" @tap="showme">我在哪</button> -->
		<!-- <button type="default" @tap="tomovie">电影</button> -->
	</view>
	<view class="member-info">
		       <text class="info-title">小组成员及分工：</text><br>
		       <text>闫正鑫：首页-电影 天气预报 我的</text><br>
		       <text>黄依慧：首页-游玩 下拉列表 </text><br>
		       <text>高艺飞：首页-运势收藏美景 游玩</text>
		   </view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from '../../utils/config';
	import { userStore } from '../../store/userstore';
	
	
	onLoad(() => {
		getLuinbo()
		getWeather()
	    getPos()
	})

	let rotateList = ref([])
	async function getLuinbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/RotatePic")
		console.log(res)
		rotateList.value = res.results
	}
	
	let searchKey=ref("")
	function searchCityBus(){
		if(searchKey.value=="")
		{
			uni.showToast({
				title:"",
				icon:"none"
			})
		}else{
			let url=`https://uri.amap.com/line?name=${searchKey.value}&city=029&src=mypage&callnative=0`
			window.location.href=url
		}
	}
	
	let weatherNow = ref({})
	async function getWeather() {
	  let res = await uni.$get(CONFIG.hefeng_now, {
	    key: CONFIG.hefeng_key,
	    location: CONFIG.hefeng_location
	  })
	  if (res.code == 200) {
	    weatherNow.value = res.now
	    console.log(res.now)
	  }
	}
	
	let gridData = [{
				title: '热映电影',
				icon: 'static/icon/movie.png'
	 
			},
			{
				title: '景点',
				icon: 'static/icon/place.png'
			},
			{
				title: '每日运势',
				icon: 'static/icon/star.png'
			},
			{
				title: '天气预报',
				icon: 'static/icon/weather.png'
			},
			{
				title: '爬山',
				icon: 'static/icon/climb.png'
			},
			{
					title: '收藏',
					icon: 'static/icon/collect.png'
				}
		]
		function changeGrid(e) {
				let index = e.detail.index
				console.log(index)
				switch (index) {
					case 0:
						uni.navigateTo({
							url: "/pages/hotMovie/hotMovie",
							//电影
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/trip/trip",
							//旅游美景
						})
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/fortune/fortune"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/forecast/forecast"
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pages/climb/climb"
						})
						break;
						case 5:
							uni.navigateTo({
								url: "/pages/favorites/favorites"
							})
							break;
						}
		
			}
		
	
	let store=userStore()
	function getPos(){
		uni.getLocation({
				success(res){
				console.log(res)
				store.setPos(res.latitude,res.longitude)
			}
		})
	}
 function showme(){
	 uni.navigateTo({
	 	url:"/pages/mywebView/mywebView?type=1"
	 })
 }
 function tomovie(){
	 uni.navigateTo({
	 	url:"/pages/hotMovie/hotMovie"
	 })
 }
	
	// 西安美景相关响应式数据和函数
	const isDropdownVisible = ref(false)
	const scenicOptions = ref([
	  {
	    name: '大雁塔',
	    image: '/static/icon/大雁塔.jpg',
	    desc: '历史悠久的佛教建筑，西安的标志性景点之一。'
	  },
	  {
	    name: '西安城墙',
	    image: '/static/icon/城墙.jpg',
	    desc: '中国现存规模最大、保存最完整的古代城垣。'
	  },
	  {
	    name: '华清宫',
	    image: '/static/icon/华清池.jpg',
	    desc: '古代帝王的离宫，有着丰富的历史文化内涵。'
	  },
	  {
	    name: '回民街',
	    image: '/static/icon/回民街.jpg',
	    desc: '历史悠久的佛教建筑，西安的标志性景点之一。'
	  },
		  {
		    name: '兵马俑',
		    image: '/static/icon/兵马俑.jpg',
		    desc: '历史悠久的佛教建筑，西安的标志性景点之一。'
		  }
		  
	])
	function handleScenicChange({ value }) {
	  console.log(`选择了美景: ${value}`)
	  // 这里可以添加根据选择的美景进行相应操作的逻辑，比如展示详情页等
	}
	function showScenicDetail(scenic) {
	  console.log(`查看 ${scenic.name} 的详情`)
	  // 可以在这里实现跳转到具体美景详情页面等功能，目前只是简单打印
	}
	
	// 美食相关数据
	const foodData = [
	  {
	    name: '肉夹馍',
	    image: '/static/icon/肉夹馍.webp',
	    description: '腊汁肉剁碎夹于馍中，馍酥肉香，回味无穷。'
	  },
	  {
	    name: '羊肉泡馍',
	    image: '/static/icon/羊肉泡馍.webp',
	    description: '烹制精细，料重味醇，肉烂汤浓，肥而不腻。'
	  },
	  {
	    name: '凉皮',
	    image: '/static/icon/凉皮.webp',
	    description: '口感爽滑，酸辣可口，是西安特色小吃之一。'
	  }
	]
	
	// 新增：用于控制美景和美食图片预览的响应式数据
	const scenicPreview = ref('')
	const foodPreview = ref('')
	
	// 新增：关闭图片预览的函数
	function closePreview() {
	  scenicPreview.value = ''
	  foodPreview.value = ''
	}

	
</script>

<style lang="scss">
	/* 基本样式 */
	.box{
		display: flex;
		// justify-content: space-around;
		align-items: center;
		// justify-content: space-around;
		.search{
			margin-left: 0;
		}
		// .icon image{
		// 	width: 20px;
		// 	height: 20px;
		// }
	}
	// .grid{
	// 	border: 1px solid #ccc;
	// 	// width: 90%;
	// 	border-radius: 10px;
	// 	margin-right: 35px;
	// 	// padding: 5px;
	// }
		.grid-item-box {
			width: 42px;
			height: 43px;
			display: flex;
			justify-content: space-around;
		 flex-direction: column;
		  align-items: center;
		  /* justify-content: center; */
		  padding: 10px;
		  margin: 5px;
		  // border-radius: 10px;
		  // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		  // background-color: #fff;
		  transition: transform 0.2s, box-shadow 0.2s;
		  cursor: pointer;
		}
		
		/* 鼠标悬停效果 */
		.grid-item-box:hover {
		  transform: translateY(-5px);
		  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
		}
		
		/* 图标样式 */
		.grid-item-box img {
		  width: 30px;
		  height: auto;
		  margin-bottom: 8px;
		}
		
		/* 文字样式 */
		.text {
		  font-size: 14px;
		  color: #333;
		  text-align: center;
		  font-weight: 500;
		}
		
		/* 适应不同屏幕 */
		@media (max-width: 768px) {
		  .grid-item-box {
		    padding: 12px;
		    margin: 6px;
		  }
		
		  .grid-item-box img {
		    width: 26px;
		  }
		
		  .text {
		    font-size: 12px;
		  }
		}
		
		/* 适应更小的屏幕 */
		@media (max-width: 480px) {
		  .grid-item-box {
		    padding: 10px;
		    margin: 4px;
		  }
		
		  .grid-item-box img {
		    width: 26px;
		  }
		
		  .text {
		    font-size: 10px;
		  }
		}
	/* 西安美景下拉列表样式 */
	.dropdown-trigger {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 10px;
	  border: 1px solid #ccc;
	  border-radius: 8px;
	  cursor: pointer;
	  transition: background-color 0.3s;
	}
	
	.dropdown-trigger.active {
	  background-color: #f0f0f0;
	}
	
	.dropdown-title {
	  font-size: 16px;
	  color: #333;
	}
	
	.dropdown-content {
	  border: 1px solid #ccc;
	  border-top: none;
	  border-radius: 0 0 8px 8px;
	  background-color: #fff;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	  max-height: 300px;
	  overflow-y: auto;
	}
	
	.dropdown-item {
	  display: flex;
	  align-items: center;
	  padding: 10px;
	  border-bottom: 1px solid #ccc;
	  transition: background-color 0.3s;
	}
	
	.dropdown-item:hover {
	  background-color: #f0f0f0;
	}
	
	.dropdown-item-text {
	  display: flex;
	  flex-direction: column;
	}
	
	.dropdown-item-title {
	  font-size: 14px;
	  color: #333;
	  font-weight: bold;
	  margin-bottom: 5px;
	}
	
	.dropdown-item-desc {
	  font-size: 12px;
	  color: #666;
	}
	
	/* 新增：美景图片预览层样式 */
	.scenic-preview {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.8);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	}
	
	.scenic-preview image {
	  max-width: 90%;
	  max-height: 90%;
	}
	
	/* 美食展示区域样式 */
	.food-section {
	  margin-top: 20px;
	  padding: 10px;
	}
	
	.food-title {
	  font-size: 20px;
	  font-weight: bold;
	  margin-bottom: 10px;
	  text-align: center;
	}
	
	.food-item {
	  display: flex;
	  align-items: center;
	  margin-bottom: 15px;
	  padding: 10px;
	  border: 1px solid #ccc;
	  border-radius: 8px;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	  transition: transform 0.3s, box-shadow 0.3s;
	}
	
	.food-item:hover {
	  transform: translateY(-5px);
	  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	}
	
	.food-item-info {
	  display: flex;
	  flex-direction: column;
	}
	
	.food-item-name {
	  font-size: 16px;
	  color: #333;
	  font-weight: bold;
	  margin-bottom: 5px;
	}
	
	.food-item-description {
	  font-size: 14px;
	  color: #666;
	}
	
	/* 新增：美食图片预览层样式 */
	.food-preview {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.8);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	}
	
	.food-preview image {
	  max-width: 90%;
	  max-height: 90%;
	}
	.member-info {
	        background-color: #e6e6fa; /* 淡紫色底色 */
	        border-radius: 5px;
	        padding: 10px;
	        margin-top: 10px;
	        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	    }


</style>